<template>
  <div>
    <table-expand
      ref="table"
      :columns="columns"
      :data="data"
      :loading="loading"
      :config="config"
      :pageSizeOpts="pageSizeOpts"
      :pageNavigation="pageNavigation"
      :queryFormItem="queryFormItem"
      :collapseFormItem="collapseFormItem"
      @loadPage="loadPage"
      @handleCreate="handleCreate"
      @handleDetail="handleDetail"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      @handleDeleteMultiple="handleDeleteMultiple"
      @handleSearch="handleSearch"
      @handleReset="handleReset"
    ></table-expand>
    <new-add-modal
      v-bind="addNewPanel"
      :modelType="modelType"
      :columns="formColumns"
      :rules="rules"
      @submit="handleNewAddSubmit"
    ></new-add-modal>
    <edit-modal
      v-bind="editPanel"
      :modelType="modelType"
      :columns="formColumns"
      :rules="rules"
      @submit="handleEditSubmit"
    ></edit-modal>
    <read-modal
      v-bind="readPanel"
      :modelType="modelType"
      :columns="columns"
      :rules="rules"
    ></read-modal>
  </div>
</template>

<script>
import tableExpand from "@/pages/components/tableExpand.vue";
import newAddModal from "@/pages/components/newAddModal.vue";
import editModal from "@/pages/components/editModal.vue";
import readModal from "@/pages/components/readModal.vue";
import mixin from "@/pages/components/mixins/mixin";
import { typeClassName } from "@/pages/config/classNameMap";
import columnsMixin from "./config";
export default {
  components: { tableExpand, newAddModal, editModal, readModal },
  name: "costFactor",
  mixins: [mixin, columnsMixin],
  data() {
    return {
      classObject: null, // 单个实例
      collectionObject: null, // 所有实例
      className: typeClassName["costFactor"].className,
      type: typeClassName["costFactor"].type,
      modelType: typeClassName["costFactor"].modelType,
      equClassName: typeClassName["accountPeriod"].className,
      equType: typeClassName["accountPeriod"].type,
      equModelType: typeClassName["accountPeriod"].modelType,
      addNewPanel: {
        width: 1024,
        zIndex: 100,
        titleStyle: {},
        drawer: {
          show: false,
        },
        cols: 2,
      },
      editPanel: {
        width: 1024,
        zIndex: 100,
        titleStyle: {},
        drawer: {
          show: false,
        },
        cols: 2,
        data: {},
      },
      readPanel: {
        width: 1024,
        zIndex: 100,
        titleStyle: {},
        drawer: {
          show: false,
        },
        cols: 2,
        data: {},
      },
      rules: {
        if_accountPeriod:[
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
            type: "number",
          },
        ],
        rawMaterialUnitPrice: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
            type: "number",
          },
        ],
        palletCost: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
            type: "number",
          },
        ],
        hydrogenUnitPrice: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
            type: "number",
          },
        ],
        laboratoryTestFee:[
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
            type: "number",
          },
        ],
        sourceMetalFactor: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
            type: "number",
          },
        ],
        metalFactor: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
            type: "number",
          },
        ],
        bagUnitPrice: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
            type: "number",
          },
        ],
        bucketUnitPrice: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
            type: "number",
          },
        ],
      },
      loading: false,
      config: {
        search: true,
        addButton: true,
        batchDeleteButton: true,
        tableSizeIcon: true,
        fullscreenIcon: true,
        refreshIcon: false,
        columnSettingIcon: true,
        action: true,
        additionalAction: false,
        hidePage: false,
      },
      pageSizeOpts: [10, 30, 50, 100],
      pageNavigation: { total: 0, pageSize: 20, pageNumber: 1 },
      selfFilter: {
        if_fromType: 0,
        if_month: "",
        if_year: "",
        tf_beginTime: "",
        tf_endTime: "",
      },
      dateCollectionObject: null,
      dateOptions: [],
    };
  },
  computed: {
    data() {
      if (this.collectionObject) {
        return this.collectionObject.records.map((d) => {
          return {
            ...d,
            ...d.values,
          };
        });
      } else {
        return [];
      }
    },
  },
  beforeMount() {
    this.collectionObject = this.$modelObject.create(
      `${this.modelType}Collection`
    );
    this.dateCollectionObject = this.$modelObject.create(
      `${this.modelType}Collection`
    ); // 把查询的数据存放到这里
    this.classObject = this.$modelObject.create(this.modelType);
    this.loadPage(this.pageNavigation, null);
    this.getDateOptions();
  },
  mounted() {},
  methods: {
    getDateOptions() {
      let filter = {
        className: this.equClassName,
        type: this.equType,
        // sf_category: "0", 0：设备，1：其他
      };
      let newFilter = "";
      if (this.tools.isReal(filter)) {
        newFilter = this.collectionObject.util.getFilter(filter);
      }
      // this.loading = true;
      let options = [];
      this.dateCollectionObject.query(newFilter).then((flag) => {
        if (flag) {
          this.dateCollectionObject.records.map((d) => {
            options.push({
              value: d.id,
              label: d.values.if_year + "-" + d.values.if_month,
            });
          });
        }
        this.dateOptions = options;
      });
    },
    async handleNewAddSubmit(data) {
      console.log(data);
      if (
        typeof this.addCondition === "function" &&
        !(await this.addCondition(data))
      ) {
        return;
      }
      data.className = this.className;
      data.type = this.type;
      data.name = +new Date();
      // if (!this.selfFilter) {
      //     this.selfFilter = {}
      // }
      data.values = {
        ...data.values,
        ...this.defaultAddData,
        ...this.selfFilter,
      };
      this.dateCollectionObject.records.forEach((item) => {
        if (item.id == data.values.if_accountPeriod) {
          console.log(item);
          data.values.if_month = item.values.if_month;
          data.values.if_year = item.values.if_year;
          data.values["tf_beginTime"] = item.values.tf_beginTime;
          data.values["tf_endTime"] = item.values.tf_endTime;
        }
      });
      this.loading = true;
      this.classObject.add(data).then((flag) => {
        if (flag) {
          this.collectionObject.records.unshift(this.classObject.record);
          this.$set(this.addNewPanel.drawer, "show", false);
          this.loading = false;
        } else {
          this.loading = false;
        }
      });
    },
  },
};
</script>
<style scoped lang="scss"></style>
